<template>
  <UniPopup ref="popupRef" borderRadius="32rpx 32rpx 0 0" :safeArea="false" backgroundColor="#fff">
    <view class="popup-view">
      <view class="header disFlxJS">
        <text class="fz-16 default-color font-bold">同意撮合</text>
        <text class="ali-icon fz-22" style="color: #ccccc8" @click="closeModel">&#xe641;</text>
      </view>
      <CustomTopTips text="您留下的备注信息最终将会给供需发布者查看" />
      <view class="pa-16 content">
        <UniForms ref="auditFormRef" :value="formData" label-position="top">
          <view class="bg-white pa-12 br-8">
            <UniFormsItem label="是否已联系申请者？" name="applicantContactStatus" required>
              <FormDataCheckbox
                v-model="formData.applicantContactStatus"
                :localdata="[
                  {
                    value: PublicBooleanEnum.YES,
                    text: '已联系',
                  },
                  {
                    value: PublicBooleanEnum.NO,
                    text: '未联系',
                  },
                ]"
              ></FormDataCheckbox>
            </UniFormsItem>
            <UniFormsItem label="给申请者评价：" name="evaluationTag">
              <FormDataCheckbox
                v-model="formData.evaluationTag"
                multiple
                :localdata="evaluationTagList"
              ></FormDataCheckbox>
            </UniFormsItem>
            <UniFormsItem label="撮合备注：" name="approvalRemark">
              <FormInput
                v-model="formData.approvalRemark"
                type="textarea"
                placeholder="您可以填写例如“已核实”“对接者有诚意”……"
                :maxlength="200"
                :styles="{
                  backgroundColor: '#F2F3F5',
                  color: '#969799',
                }"
              />
            </UniFormsItem>
          </view>
        </UniForms>
        <view
          v-if="data?.incentiveOpen === IncentiveOpenEnum.Yes && data.isOpenIncentive"
          class="bg-white pt-12 pb-1 px-16 br-8 mt-12"
        >
          <Matchmake
            ref="matchmakeRef"
            :incentive-open="data?.incentiveOpen"
            :incentive-type="data?.incentiveType"
            :curr-promotion-commission-rate="data?.incentiveCommissionRate"
            :curr-incentive-details="data?.incentiveDetails"
            :distribute-remarks="data?.incentiveDetails"
            :promotion-commission-rate="data.incentiveCommissionRate"
            :estimated-scale="data?.estimatedScale"
          />
        </view>
      </view>
      <TButtonGroup position="unset">
        <TButton
          text="同意撮合"
          type="primary"
          class="gutter-btn"
          custom-class="h-44 linh-44 br-22"
          @click="handleSubmit"
        />
      </TButtonGroup>
    </view>
  </UniPopup>
</template>

<script setup lang="ts">
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import UniForms from '@/components/Form/uni_modules/uni-forms/uni-forms.vue';
  import UniFormsItem from '@/components/Form/uni_modules/uni-forms-item/uni-forms-item.vue';
  import FormDataCheckbox from '@/components/Form/components/FormDataCheckbox.vue';
  import FormInput from '@/components/Form/components/FormInput.vue';
  import CustomTopTips from '@/components/CustomTopTips/index.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import Matchmake from '../components/BusinessOpportunitieSet/Matchmake.vue';
  import { getCurrentInstance, reactive, ref, watch, type PropType } from 'vue';
  import type { Localdata } from '@/components/Form/types';
  import { PublicBooleanEnum } from '@/enums/publicModuleEnum';
  import { propTypes } from '@/utils/propTypes';
  import type { IApplyTypeAuditRecordDetailsResult } from '@/api/businessOpportunities/type';
  import { IncentiveOpenEnum, MatchApprovalStatusEnum } from '@/enums/businessOpportunitiesEnum';
  import { applyTypeAuditRecordReview } from '@/api/businessOpportunities';
  import { Toast } from '@/utils';

  const props = defineProps({
    modelValue: propTypes.bool.def(false),
    data: Object as PropType<IApplyTypeAuditRecordDetailsResult>,
  });

  const emits = defineEmits(['update:modelValue', 'refresh']);

  const matchmakeRef = ref<InstanceType<typeof Matchmake>>();

  watch(
    () => props.modelValue,
    (val) => {
      val ? openModel() : closeModel();
    },
  );

  const _this = getCurrentInstance();
  const evaluationTagList = ref<Localdata[]>([
    {
      value: '诚意对接',
      text: '诚意对接',
    },
    {
      value: '经验丰富',
      text: '经验丰富',
    },
    {
      value: '有实力',
      text: '有实力',
    },
    {
      value: '响应快',
      text: '响应快',
    },
  ]);
  const formData = reactive({
    applicantContactStatus: PublicBooleanEnum.YES,
    evaluationTag: [],
    approvalRemark: '',
  });
  const auditFormRef = ref<InstanceType<typeof UniForms>>();
  function openModel() {
    (_this?.refs['popupRef'] as any).open('bottom');
  }

  function closeModel() {
    emits('update:modelValue');
    (_this?.refs['popupRef'] as any).close();
  }

  async function handleSubmit() {
    await auditFormRef.value?.validate();
    const res = props.data?.isOpenIncentive ? await matchmakeRef.value?.submit() : null;
    const incentiveDetails = res?.distributeRemarks || '';
    const incentiveCommissionRate = res?.promotionCommissionRate || void 0;
    applyTypeAuditRecordReview({
      id: props.data!.id,
      approvalStatus: MatchApprovalStatusEnum.agree,
      approvalRemark: formData.approvalRemark,
      applicantContactStatus: formData.applicantContactStatus,
      evaluationTag: formData.evaluationTag.join(','),
      incentiveDetails,
      incentiveCommissionRate,
    }).then(() => {
      Toast('操作成功');
      emits('refresh');
      closeModel();
    });
  }
</script>

<style lang="scss" scoped>
  .popup-view {
    .header {
      height: 96rpx;
      box-shadow: 0px -1px 0px 0px #ebedf0 inset;
      padding: 0rpx 24rpx 0rpx 32rpx;
    }

    .content {
      background-color: #f7f8fa;
      height: 1000rpx;
      overflow-y: auto;
    }
  }
</style>
